<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单页面</title>
    <link rel="stylesheet" href="../css/base.min.css">
    <link rel="stylesheet" href="../css/order-page.min.css">
    <!-- bootstrap样式 -->
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <!-- 侧边悬浮导航栏 -->
    <div class="bar">
        <a href="shoppingcart.html" class="item">
            <span class="badge badge-light">0</span>
        </a>
        <a href="backsystem_home.html" class="item"></a>
        <a href="personalcenter.html" class="item"></a>
    </div>
    <!-- 头部header样式 -->
    <header class="container">
        <!-- 头部nav -->
        <div class="row">
            <div class="col-8 offset-2">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                        <a class="navbar-brand logo" href="#"><img src="../images/index_logo.png" alt=""></a>
                        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        </ul>
                        <form class="form-inline my-2 my-lg-0">
                            <a href="login.html" class="login">登录</a>
                            <div class="border"></div>
                            <a href="register.html" class="register">注册</a>
                            <div class="input">
                                <input type="text" placeholder="热门搜索：千花花瓶">
                                <i class="search"></i>
                            </div>
                            <a href="#" class="nav-user"></a>
                            <a href="#" class="nav-code"></a>
                        </form>
                    </div>
                </nav>
            </div>

        </div>
        <!-- 导航栏 -->
        <div class="row">
            <div class="col-10 offset-1">
                <ul class="nav justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">所有商品</a>
                        <div class="sub-nav">
                            <ul>
                                <li>
                                    <img src="../images/sub_nav1.jpg" alt="">
                                    <span>浓情欧式</span>
                                </li>
                                <div class="division"></div>
                                <li>
                                    <img src="../images/sub_nav2.jpg" alt="">
                                    <span>浪漫美式</span>
                                </li>
                                <div class="division"></div>
                                <li>
                                    <img src="../images/sub_nav3.jpg" alt="">
                                    <span>雅致中式</span>
                                </li>
                                <div class="division"></div>
                                <li>
                                    <img src="../images/sub_nav4.jpg" alt="">
                                    <span>简约现代</span>
                                </li>
                                <div class="division"></div>
                                <li>
                                    <img src="../images/sub_nav5.jpg" alt="">
                                    <span>创意装饰</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="decorate.html">装饰摆件</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">布艺软饰</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="wall-decoration.html">墙式壁挂</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">蜡艺香薰</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">创意家居</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 头部状态栏 -->
    <div class="wrap">
        <div class="shopping-status">
            <div class="shopping-title">订单确认</div>
            <div class="shooping-progress">
                <i class="checked"><img src="../images/shopping_icon3.png" alt=""></i>
                <p class="checked">购物车</p>
                <div class="shopping-division"></div>
                <i class="unchecked"><img src="../images/shopping_icon1.png" alt=""></i>
                <p class="unchecked">订单确认</p>
                <div class="shopping-division"></div>
                <i class="unchecked"><img src="../images/shopping_icon2.png" alt=""></i>
                <p class="unchecked">完成订单</p>
            </div>
            <a href="index.html" class="con-shopping">继续购物></a>
        </div>
    </div>
    <!-- 中间内容部分 -->
    <main>
        <div class="container">
            <section>
                <div class="section-title">
                    <p>收件信息</p>
                    <a href="./shoppingcart.html" data-toggle="modal" data-target="#address">新增地址</a>
                </div>
                <!-- Modal -->
                <div class="modal fade" id="address" data-backdrop="static" data-keyboard="false" tabindex="-1"
                    aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <input type="text" placeholder="姓名">
                            <input type="text" placeholder="手机号">
                            <div class="address-select">
                                <select class="form-control">
                                    <option>省份/自治州</option>
                                </select>
                                <select class="form-control">
                                    <option>城市/地区</option>
                                </select>
                            </div>
                            <div class="address-select">
                                <select class="form-control">
                                    <option>区/县</option>
                                </select>
                                <select class="form-control">
                                    <option>配送区域</option>
                                </select>
                            </div>
                            <input type="text">
                            <input type="text" placeholder="邮政编码">
                            <hr class="address-modalhr">
                            <div class="btns">
                                <button class="addressbtn address-modalsave" data-dismiss="modal">保存</button>
                                <button class="addressbtn address-modalcancel" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="order-info">
                    <div class="info">
                        <div class="info-title">
                            <div class="titlel">
                                <p>张三</p>
                                <span>[默认地址]</span>
                            </div>
                            <div class="titler">
                                <a href="#" class="infol">删除</a>
                                <a href="#" class="infor">编辑</a>
                            </div>
                        </div>
                        <div class="info-content">
                            <p>河北省 唐山市 路北区 大学生公寓村</p>
                            <p>15732570937</p>
                        </div>
                    </div>
                    <div class="info">
                        <div class="info-title">
                            <div class="titlel">
                                <p>张三</p>
                                <span>[默认地址]</span>
                            </div>
                            <div class="titler">
                                <a href="#">设为默认</a>
                                <a href="#" class="infol">删除</a>
                                <a href="#" class="infor">编辑</a>
                            </div>
                        </div>
                        <div class="info-content">
                            <p>河北省 唐山市 路北区 大学生公寓村</p>
                            <p>15732570937</p>
                        </div>
                    </div>
                    <div class="info">
                        <div class="info-title">
                            <div class="titlel">
                                <p>张三</p>
                                <span>[默认地址]</span>
                            </div>
                            <div class="titler">
                                <a href="#">设为默认</a>
                                <a href="#" class="infol">删除</a>
                                <a href="#" class="infor">编辑</a>
                            </div>
                        </div>
                        <div class="info-content">
                            <p>河北省 唐山市 路北区 大学生公寓村</p>
                            <p>15732570937</p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="pm-title">支付方式</div>
                    <div class="paymethod">
                        <div>
                            <i><img src="../images/order_page_img3.jpg" alt=""></i>支付宝支付
                        </div>
                        <div>
                            <i><img src="../images/order_page_img4.jpg" alt=""></i>微信支付
                        </div>
                        <div>
                            <i><img src="../images/order_page_img5.jpg" alt=""></i>银联支付
                        </div>
                        <div>货到付款</div>
                    </div>
                </div>
                <div>
                    <div class="pm-title">选择快递</div>
                    <div class="paymethod">
                        <div>顺丰快递</div>
                        <div>百世汇通</div>
                        <div>圆通快递</div>
                        <div>货到付款</div>
                    </div>
                </div>
            </section>
            <article>
                <div class="order-content">
                    <div class="article-title">
                        <p>订单内容</p>
                        <a href="./shoppingcart.html">返回购物车</a>
                    </div>
                    <a href="details-page.html">
                        <div class="wares-list">
                            <i><img src="../images/order_page_img1.jpg" alt=""></i>
                            <div class="des">
                                <p>创意现代简约干花花瓶摆件</p>
                                <span>颜色分类：烟灰色玻璃瓶</span>
                                <span>数量：1</span>
                            </div>
                            <p>￥69.90</p>
                        </div>
                    </a>
                    <a href="details-page.html">
                        <div class="wares-list">
                            <i><img src="../images/order_page_img2.jpg" alt=""></i>
                            <div class="des">
                                <p>创意现代简约干花花瓶摆件</p>
                                <span>颜色分类：烟灰色玻璃瓶</span>
                                <span>数量：1</span>
                            </div>
                            <p>￥69.90</p>
                        </div>
                    </a>
                </div>
                <div class="money">
                    <div>商品金额：</div>
                    <div>￥139.80</div>
                </div>
                <div class="money">
                    <div>优惠金额：</div>
                    <div>￥0.00</div>
                </div>
                <div class="money">
                    <div>运费：</div>
                    <div>免运费</div>
                </div>
                <div class="intotal">
                    <div class="order-total">
                        <p>合计：</p>
                        <span>￥139.80</span>
                    </div>
                    <a href="paysuccess.html"><button>去支付</button></a>
                </div>
            </article>
        </div>
    </main>
    <!-- 底部footer布局 -->
    <footer>
        <section>
            <ul>
                <li>
                    <i>7</i>
                    <a href="#">七天无理由退货</a>
                </li>
                <li>
                    <i>15</i>
                    <a href="#">15天免费换货</a>
                </li>
                <li>
                    <i>邮</i>
                    <a href="#">满599包邮</a>
                </li>
                <li>
                    <i>服</i>
                    <a href="#">手机特色服务</a>
                </li>
            </ul>
        </section>
        <div class="footer">
            <p>蜗牛家居©2019-2021公司版权所有 京ICP备080100-xx号</p>
            <p>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
        </div>
    </footer>
</body>

</html>